// 加载地图
import AMapLoader from "@amap/amap-jsapi-loader";
import companyGreen from "@/assets/company_default.png";
import siteYellow from "@/assets/cs_default.png";
import redCar from "@/assets/car_red.png";
import carBlue from "@/assets/car_default.png";
import storageblue from "@/assets/storage_default.png";
import allData from "@/utils/data";
import {Electronic_fence} from "@/stores/Electronic_fence.";
import {ref} from "vue";
// console.log(animatFlag)
// 加载地图
function loadTheMap(plugins: string[]) {
    window._AMapSecurityConfig = {
        securityJsCode: "78cff5b59a10d52bba884ffd4398cb0f",
    }
    return AMapLoader.load({
        key: "25a2873d0cde5d0806c0bd90a8e7ac10", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins, //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    })
}

// 创建地图
function createMap(AMap: any, center: number[]) {
    return new AMap.Map("container", {
        // 设置地图容器id
        viewMode: "2D", // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center, // 初始化地图中心点位置
    });
}

// 添加标记点
function addmarked(AMap: any, item: any) {
    return new AMap.Marker({
        position: new AMap.LngLat(...item.lngLat),
        icon: createIcon(AMap, item),
        offset: new AMap.Pixel(-13, -30)
    });
}

// 创建Icon函数
function createIcon(AMap: any, item: any) {
    return new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(25, 34),
        // 图标的取图地址
        image: item.type == 0 ? companyGreen : item.type == 1 ? siteYellow : item.type == 2 && item.id == 3 ? redCar : item.type == 2 && item.id == 4 ? carBlue : storageblue,
        // 图标所用图片大小
        imageSize: new AMap.Size(28, 30),
        // 图标取图偏移量
        imageOffset: new AMap.Pixel(0, 0)
    });
}

// 构建自定义信息窗体
function createInfoWindow(AMap: any, item: any, map: any, arr: any, startMarker: any) {
    return new AMap.InfoWindow({
        isCustom: true,  //使用自定义窗体
        content: createInfoWindows(AMap, item, map, arr, startMarker),
        offset: new AMap.Pixel(16, -45)
    });
}

// 使用信息窗体
// 创建信息窗体
function createInfoWindows(AMap: any, item: any,  map: any,arr:any, startMarker: any) {
    var title = `${item.name}编号【${item.id}】`
    var content = `
    <div class="Information_sheet">
      <div>
        <div>经度：${item.lngLat[0]}</div>
        <div>纬度：${item.lngLat[1]}</div>
      </div>
      <div>
        <div>详细位置：河北省邯郸市复兴区G22青兰高速</div>
      </div>
      <div>
        <div>车速：0km/h</div>
        <div>发送时间：2018-12-28 14:24</div>
      </div>
      <div>
        <div>所属企业：邯郸全有生态建材有限公司</div>
        <div>待处理报警个数：42</div>
      </div>
      <div>
        <div>待处理报警类型：车辆超速</div>
      </div>
  </div>`;

    var content2 = `
   <div class="Information_sheet">
      <div>
        <div>经度：${item.lngLat[0]}</div>
        <div>纬度：${item.lngLat[1]}</div>
      </div>
      <div>
        <div>详细位置：河北省邯郸市丛台区邯郸全有生态建材有限公司</div>
      </div>
  </div>
         `;

    var content3 = `
   <div class="Information_sheet">
      <div>
        <div>经度：${item.lngLat[0]}</div>
        <div>纬度：${item.lngLat[1]}</div>
      </div>
      <div>
        <div>详细位置：河北省邯郸市复兴区G22青兰高速</div>
      </div>
      <div>
        <div>门禁状态：${item.access}</div>
        <div>生产状态：${item.status}</div>
      </div>
  </div>
`
    var content4 = `
   <div  class="Information_sheet">
      <div>
        <div>经度：${item.lngLat[0]}</div>
        <div>纬度：${item.lngLat[1]}</div>
      </div>
      <div>
        <div>详细位置：河北省邯郸市丛台区实惠小吃万浩俪城3期(建设中)</div>
      </div>
      <div>
        <div>所属企业：邯郸全有生态建材有限公司</div>
        <div>所属工地：${allData[1].name}</div>
      </div>
       <div>
        <div>发送时间：2018-11-27 15:33</div>
        <div>储料罐重量：490kg</div>
      </div>
       <div>
        <div>容量：35000kg</div>
        <div>百分比1.4%</div>
      </div>
     <div>
        <div>待处理报警个数：0个</div>
      </div>
      <div>
        <div>待处理报警类型：</div>
      </div>
  </div>
          `
    var info = document.createElement("div");
    info.className = "custom-info input-card content-window-card";
    //可以通过下面的方式修改自定义窗体的宽高
    info.style.width = "462px";
    // 定义顶部标题
    var top = document.createElement("div");
    var titleD = document.createElement("div");
    var closeX = document.createElement("img");
    top.className = "info-top";
    titleD.innerHTML = title;
    closeX.src = "https://webapi.amap.com/images/close2.gif";
    closeX.onclick = closeInfoWindow;
    top.appendChild(titleD);
    top.appendChild(closeX);
    info.appendChild(top);
    // 定义中部内容
    var middle = document.createElement("div");
    middle.innerHTML = item.type == 2 ? content : item.type == 1 ? content2 : item.type == 0 ? content3 : content4
    var btn = document.createElement("button");
    middle.className = "info-middle";
    middle.style.backgroundColor = 'white';
    info.appendChild(middle);
    btn.innerHTML = '轨迹回放';
    btn.className = 'TrackBtn'

    if (item.type == 2) {
        middle.appendChild(btn)
    }
    btn.addEventListener('click', () => {
        let flag = arr[0].value
            flag = !flag
        arr[0].value =  flag
        map.clearInfoWindow();
        Track_playback(AMap, map, item, arr, startMarker)
    })

    //关闭信息窗体
    function closeInfoWindow() {
        map.clearInfoWindow();
    }

    return info

}


// 轨迹回放函数
function Track_playback(AMap: any, map: any, item: any,arr:any, startMarker: any) {
    new AMap.Polyline({
        map: map,
        path: item.lineArr,
        showDir: true,
        strokeColor: "#28F",  //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6,      //线宽
        // strokeStyle: "solid"  //线样式
    });

    var passedPolyline = new AMap.Polyline({
        map: map,
        strokeColor: "#AF5",  //线颜色
        strokeWeight: 6,      //线宽
    });
    startMarker.on('moving', function (e: any) {
        passedPolyline.setPath(e.passedPath);
        map.setCenter(e.target.getPosition(), true)
    });

    arr[1].value.addEventListener('click', () => {

            // var mouseTool = new AMap.MouseTool(map)

            startMarker.moveAlong(item.lineArr, {
                speed: arr[5].value,
                // 每一段的时长
                // duration: 500,//可根据实际采集时间间隔设置
                //  JSAPI2.0 //是否延道路自动设置角度在 moveAlong 里设置
                autoRotation: true,
            });
        })
    arr[2].value.addEventListener('click', () => startMarker.pauseMove())
    arr[3].value.addEventListener('click', () => startMarker.resumeMove())
    arr[4].value.addEventListener('click', () => {
                window.location.reload()
                startMarker.stopMove()
            }
        )
    map.setFitView();
}


// 电子围栏

function drawing(AMap:any,map:any,arr:any){
    arr[6].value.addEventListener('click', () => {
        var mouseTool = new AMap.MouseTool(map)
        mouseTool.polygon({
            strokeColor: "#FF33FF",
            strokeOpacity: 0.1,
            strokeWeight: 6,
            // strokeOpacity: 0.2,
            fillColor: '#1791fc',
            fillOpacity: 0.1,
            // 线样式还支持 'dashed'
            strokeStyle: "solid",
            // strokeStyle是dashed时有效
            // strokeDasharray: [30,10],
        })
        mouseTool.on('draw', function (event: any) {
            allData.filter(item => item.type == 2).forEach(item => {
                var inRing = AMap.GeometryUtil.isPointInRing(item.lngLat, event.obj._opts.path);
                console.log(inRing)
            })
            // 结束绘制
            arr[7].value.addEventListener('click', () => {
                // console.log(event.obj._opts.path)
                Electronic_fence().Electronic(event.obj._opts.path)
                console.log(Electronic_fence().Electronic(event.obj._opts.path))
                mouseTool.close(false)
            })
        })

    })
}


export {loadTheMap, createMap, addmarked, createIcon, createInfoWindows, createInfoWindow,drawing};